<template>
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
            <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;"> 空压机油冷器 </caption>
            <tbody >
            <tr>
              <td style="background-color:  #dcdcdc;font-weight:bold;">空压机油冷器进水压力1(Mpa)</td>
              <td style="background-color:  #dcdcdc;font-weight:bold;">空压机油冷器进水压力2(Mpa)</td>
              <td style="background-color:  #dcdcdc;font-weight:bold;">空压机油冷器回水管温度1(℃)</td>
              <td style="background-color:  #dcdcdc;font-weight:bold;">空压机油冷器回水管温度2(℃)</td>

            </tr>
            <tr >
              <td >{{decimal(realTimeData.st7_c_sl_pi0901,2)}}</td>
              <td >{{decimal(realTimeData.st7_c_sl_pi0902,2)}}</td>
              <td > {{decimal(realTimeData.st7_c_sl_ti0903,2)}}</td>
              <td >  {{decimal(realTimeData.st7_c_sl_ti0904,2)}}</td>

            </tr>

            </tbody>
          </table>
        </el-col>
        <el-col :span="12">
          <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
            <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;">空气压缩机</caption>
            <tbody >
            <tr>
              <td style="background-color:  #dcdcdc;font-weight:bold;">空气压缩机供气母管流量(m³/h)</td>
              <td style="background-color:  #dcdcdc;font-weight:bold;">空气压缩机供气母管压力(Mpa)</td>
              <td style="background-color:  #dcdcdc;font-weight:bold;">空气压缩机供气母管温度(℃)</td>


            </tr>
            <tr >
              <td >  {{decimal(realTimeData.st7_c_sl_fi0205,2)}}</td>
              <td >  {{decimal(realTimeData.st7_c_sl_pi0205,2)}}</td>
              <td > {{decimal(realTimeData.st7_c_sl_ti0205,2)}}</td>


            </tr>

            </tbody>
          </table>
        </el-col>
      </el-row>
        <el-divider class="dividerStyle"></el-divider>
        <el-row :gutter="20">
            <el-col :span="12">
                <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
                    <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;"> 干燥机</caption>
                    <tbody >
                    <tr>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">干燥机冷却进水压力1(Mpa)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">干燥机冷却进水压力2(Mpa)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">干燥机冷却进水压力3(Mpa)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">干燥机冷却进水压力4(Mpa)</td>

                    </tr>
                    <tr >
                        <td > {{decimal(realTimeData.st7_c_sl_pi0907,2)}}</td>
                        <td > {{decimal(realTimeData.st7_c_sl_pi0908,2)}}</td>
                        <td >  {{decimal(realTimeData.st7_c_sl_pi0909,2)}}</td>
                        <td >    {{decimal(realTimeData.st7_c_sl_pi0910,2)}}</td>

                    </tr>
                    <tr>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">干燥机冷却回水管温度1(℃)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">干燥机冷却回水管温度2(℃)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">干燥机冷却回水管温度3(℃)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;"></td>

                    </tr>
                    <tr >
                        <td >{{decimal(realTimeData.st7_c_sl_ti0910,2)}}</td>
                        <td >  {{decimal(realTimeData.st7_c_sl_ti0911,2)}}</td>
                        <td >  {{decimal(realTimeData.st7_c_sl_ti0911,2)}}</td>
                        <td >  </td>

                    </tr>

                    </tbody>
                </table>
                <el-divider class="dividerStyle"></el-divider>
                <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
                    <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;"> 净环水</caption>
                    <tbody >
                    <tr>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">净环给水主管流量(m³/h)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">净环给水主管压力(Mpa)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">净环给水水温(℃)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">净环回水温度(℃)</td>

                    </tr>
                    <tr >
                        <td > {{decimal(realTimeData.st7_c_sl_fi0901,2)}}</td>
                        <td >  {{decimal(realTimeData.st7_c_sl_pi0911,2)}}</td>
                        <td >  {{decimal(realTimeData.st7_c_sl_ti0901,2)}}</td>
                        <td >   {{decimal(realTimeData.st7_c_sl_ti0902,2)}}</td>

                    </tr>


                    </tbody>
                </table>
            </el-col>
            <el-col :span="12">
                <table class="operate-table" style="margin-left: 1px;margin-right: 0px;width: 99.7%;border-radius: 0.5em;border-collapse: collapse;padding: 0;">
                    <caption style="font-weight: bold;font-size: 20px;background-color: #bfefff;line-height: 35px;">空压机中间冷却器</caption>
                    <tbody >
                    <tr>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器进水压力1(Mpa)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器进水压力2(Mpa)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器进水压力3(Mpa)</td>



                    </tr>
                    <tr >
                        <td >   {{decimal(realTimeData.st7_c_sl_pi0903,2)}}</td>
                        <td >   {{decimal(realTimeData.st7_c_sl_pi0904,2)}}</td>
                        <td >  {{decimal(realTimeData.st7_c_sl_pi0905,2)}}</td>



                    </tr>
                    <tr>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器进水压力4(Mpa)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器回水管温度1(℃)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器回水管温度2(℃)</td>



                    </tr>
                    <tr >
                        <td >  {{decimal(realTimeData.st7_c_sl_pi0906,2)}}</td>
                        <td >   {{decimal(realTimeData.st7_c_sl_ti0905,2)}}</td>
                        <td >   {{decimal(realTimeData.st7_c_sl_ti0906,2)}}</td>



                    </tr>
                    <tr>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器回水管温度3(℃)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器回水管温度4(℃)</td>
                        <td style="background-color:  #dcdcdc;font-weight:bold;">空压机中间冷却器回水管温度5(℃)</td>



                    </tr>
                    <tr >
                        <td >   {{decimal(realTimeData.st7_c_sl_ti0907,2)}}</td>
                        <td >    {{decimal(realTimeData.st7_c_sl_ti0908,2)}}</td>
                        <td >    {{decimal(realTimeData.st7_c_sl_ti0909,2)}}</td>



                    </tr>
                    </tbody>
                </table>
            </el-col>
        </el-row>
<!--        <el-row style="text-align: center;">-->
<!--            <el-col :span="8" :xs="24" style="height:100%">-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                            1#空压机油冷器-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>空压机油冷器进水压力1(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0901,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>空压机油冷器进水压力2(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0902,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>空压机油冷器回水管温度1(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0903,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>空压机油冷器回水管温度2(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0904,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--                <el-divider class="dividerStyle"></el-divider>-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                             空气压缩机-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>空气压缩机供气母管流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_fi0205,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>空气压缩机供气母管压力(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0205,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>空气压缩机供气母管温度(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0205,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="8" :xs="24" style="height:100%">-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                             空压机中间冷却器-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                               <div>空压机中间冷却器进水压力1(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0903,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                               <div>空压机中间冷却器进水压力2(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0904,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                               <div>空压机中间冷却器进水压力3(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0905,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                               <div>空压机中间冷却器进水压力4(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0906,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                                <div>空压机中间冷却器回水管温度1(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0905,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                                <div>空压机中间冷却器回水管温度2(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0906,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                                <div>空压机中间冷却器回水管温度3(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0907,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                                <div>空压机中间冷却器回水管温度4(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0908,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="15" class="param-title">-->
<!--                                <div>空压机中间冷却器回水管温度5(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="9">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0909,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="8" :xs="24" style="height:100%">-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                            干燥机-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>干燥机冷却进水压力1(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0907,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>干燥机冷却进水压力2(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0908,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>干燥机冷却进水压力3(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0909,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                               <div>干燥机冷却进水压力4(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0910,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>干燥机冷却回水管温度1(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0910,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>干燥机冷却回水管温度2(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0911,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>干燥机冷却回水管温度3(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0911,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--                <el-divider class="dividerStyle"></el-divider>-->
<!--                <el-card  style="height:100%;font-size:14px;width:95%">-->
<!--                    <el-row style="font-size:20px;font-weight:bold;">-->
<!--                        <span>-->
<!--                             净环水-->
<!--                        </span>-->
<!--                    </el-row>-->
<!--                    <div >-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>净环给水主管流量(m³/h)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_fi0901,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 8px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>净环给水主管压力(Mpa)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_pi0911,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>净环给水水温(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0901,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->

<!--                        <el-row style="margin-top: 5px;">-->
<!--                            <el-col :span="12" class="param-title">-->
<!--                                <div>净环回水温度(℃)</div>-->
<!--                            </el-col>-->
<!--                            <el-col :span="12">-->
<!--                                <el-tag style="width: 100%">-->
<!--                                    {{decimal(realTimeData.st7_c_sl_ti0902,2)}}-->
<!--                                </el-tag>-->
<!--                            </el-col>-->
<!--                        </el-row>-->
<!--                    </div>-->


<!--                </el-card>-->
<!--            </el-col>-->



<!--        </el-row>-->
<!--        <el-form :model="queryParams" ref="queryForm" :inline="true" >-->
<!--        <el-form-item label="时间范围" prop="dateRange">-->
<!--            <el-date-picker-->
<!--            v-model="dateRange"-->
<!--            type="datetimerange"-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            align="left"-->
<!--            size="small">-->
<!--            </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--            <el-button type="primary" icon="el-icon-search" size="mini" @click="drawChart">搜索</el-button>-->
<!--            <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>-->
<!--        </el-form-item>-->
<!--        </el-form>-->
<!--        <el-row >-->
<!--            <el-col :span="12" :xs="24">-->
<!--                <div ref="chart1" :style="{height: chartHeight + 'px' }"></div>-->
<!--            </el-col>-->
<!--            <el-col :span="12" :xs="24">-->
<!--                <div ref="chart2" :style="{height: chartHeight + 'px' }"></div>-->
<!--            </el-col>-->
<!--            </el-row>-->
<!--            <el-row >-->
<!--            <el-col :span="12" :xs="24">-->
<!--                <div ref="chart3" :style="{height: chartHeight + 'px' }"></div>-->
<!--            </el-col>-->
<!--            <el-col :span="12" :xs="24">-->
<!--                <div ref="chart4" :style="{height: chartHeight + 'px' }"></div>-->
<!--            </el-col>-->
<!--        </el-row>-->
    </div>
</template>
<script>
  import { getRealDataByTags} from "@/api/app/plc/cache";
  import * as echarts from 'echarts'
  export default {
      name: "actual",
    data() {
      return {
        timer: null,
        dateRange: [this.moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')],
        queryParams: {
            beginTime: null,
            endTime: null,
        },
        seriesDateDqP: [],
        seriesDateDqT: [],
        seriesDateDqF: [],
        seriesDateDqLF: [],
        seriesDateDhP: [],
        seriesDateDhT: [],
        seriesDateDhF: [],
        seriesDateDhLF: [],
        seriesDateYqP: [],
        seriesDateYqT: [],
        seriesDateYqF: [],
        seriesDateYqLF: [],
        seriesDateZqP: [],
        seriesDateZqT: [],
        seriesDateZqF: [],
        seriesDateZqLF: [],
        seriesDateKqP: [],
        seriesDateKqT: [],
        seriesDateKqF: [],
        seriesDateKqLF: [],
        seriesDateMqP: [],
        seriesDateMqT: [],
        seriesDateMqF: [],
        seriesDateMqLF: [],
        realTimeData: {
            st7_c_sl_by900: 0,//1#空压机电机电流
            st7_c_sl_by902: 0,//2#空压机电机电流
            st7_c_sl_by904: 0,//3#空压机电机电流
            st7_c_sl_pi0901: 0,//空压机油冷器进水压力1
            st7_c_sl_pi0902: 0,//空压机油冷器进水压力2
            st7_c_sl_pi0903: 0,//空压机中间冷却器进水压力1
            st7_c_sl_pi0904: 0,//空压机中间冷却器进水压力2
            st7_c_sl_pi0905: 0,//空压机中间冷却器进水压力3
            st7_c_sl_pi0906: 0,//空压机中间冷却器进水压力4
            st7_c_sl_ti0903: 0,//空压机油冷器回水管温度1
            st7_c_sl_ti0904: 0,//空压机油冷器回水管温度2
            st7_c_sl_ti0905: 0,//空压机中间冷却器回水管温度1
            st7_c_sl_ti0906: 0,//空压机中间冷却器回水管温度2
            st7_c_sl_ti0907: 0,//空压机中间冷却器回水管温度3
            st7_c_sl_ti0908: 0,//空压机中间冷却器回水管温度4
            st7_c_sl_ti0909: 0,//空压机中间冷却器回水管温度5
            st7_c_sl_pi0907: 0,//干燥机冷却进水压力1
            st7_c_sl_pi0908: 0,//干燥机冷却进水压力2
            st7_c_sl_pi0909: 0,//干燥机冷却进水压力3
            st7_c_sl_pi0910: 0,//干燥机冷却进水压力4
            st7_c_sl_ti0910: 0,//干燥机冷却回水管温度1
            st7_c_sl_ti0911: 0,//干燥机冷却回水管温度2
            st7_c_sl_ti0912: 0,//干燥机冷却回水管温度3
            st7_c_sl_ti0913: 0,//干燥机冷却回水管温度4
            st7_c_sl_ti0914: 0,//干燥机冷却回水管温度5
            st7_c_sl_pi0911: 0,//净环给水主管压力
            st7_c_sl_fi0901: 0,//净环给水主管流量
            st7_c_sl_ti0901: 0,//净环给水水温度
            st7_c_sl_ti0902: 0,//净环回水水温度
            st7_c_sl_pi0205: 0,//空气压缩机供气母管压力
            st7_c_sl_fi0205: 0,//空气压缩机供气母管流量
            st7_c_sl_ti0205: 0//空气压缩机供气母管温度
        },
        chartHeight: 250
      }
    },
    mounted() {
        // window.onresize = () => {
        //     return (() => {
        //         this.chartHeight = (window.innerHeight -250)/2  + "px";
        //     })();
        // };

        // this.drawChart();
        this.realTimeInfo()
        this.timer = setInterval(() => {
            this.realTimeInfo()
        }, 1000)
    },
    beforeDestroy() {
        this.timer && clearInterval(this.timer)
        this.timer=null;
    },
    methods: {
        decimal(number, digit) {
            return parseFloat(parseFloat(number).toFixed(digit))
        },
        //获取实时数据
        realTimeInfo(){
            getRealDataByTags("空压机,水泵","or").then(res =>{
              console.log("res "+res.data);
                this.realTimeData = res.data
            })
        },
        //查询时间重置
        reset(){
            this.dateRange = [this.moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss'), this.moment().format('YYYY-MM-DD HH:mm:ss')]
            this.queryParams.beginTime = null;
        },
        drawChart() {
            this.queryParams.beginTime = null
            this.queryParams.endTime = null
            if (this.dateRange) {
                this.queryParams.beginTime = this.dateRange[0]
                this.queryParams.endTime = this.dateRange[1]
            }
            getEnergyChartAll(this.queryParams).then(res => {
                let list = res.data
              console.log("list "+list)
                let series1 = []
                let series2 = []
                let series3 = []
                let series4 = []
                this.seriesDateDqP = []
                this.seriesDateDqT = []
                this.seriesDateDqF = []
                this.seriesDateDqLF = []
                this.seriesDateDhP = []
                this.seriesDateDhT = []
                this.seriesDateDhF = []
                this.seriesDateDhLF = []
                this.seriesDateYqP = []
                this.seriesDateYqT = []
                this.seriesDateYqF = []
                this.seriesDateYqLF = []
                this.seriesDateZqP = []
                this.seriesDateZqT = []
                this.seriesDateZqF = []
                this.seriesDateZqLF = []
                this.seriesDateKqP = []
                this.seriesDateKqT = []
                this.seriesDateKqF = []
                this.seriesDateKqLF = []
                this.seriesDateMqP = []
                this.seriesDateMqT = []
                this.seriesDateMqF = []
                this.seriesDateMqLF = []
                if(list!=null){
                    Object.keys(list).forEach(key => {
                        if(key.includes("1#水泵")){
                            if(key.includes("压力")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateDqP.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("温度")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateDqT.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("累积流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateDqLF.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("总管流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateDqF.push([list[key][i].dt, list[key][i].value])
                                }
                            }
                        }else if(key.includes("2#水泵")){
                            if(key.includes("压力")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateDhP.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("温度")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateDhT.push([list[key][i].dt, list[key][i].value])
                                    // console.log([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("累积流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateDhLF.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("总管流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateDhF.push([list[key][i].dt, list[key][i].value])
                                }
                            }
                        }else if(key.includes("3#水泵")){
                            if(key.includes("压力")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateYqP.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("温度")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateYqT.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("累积流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateYqLF.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("总管流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateYqF.push([list[key][i].dt, list[key][i].value])
                                }
                            }
                        }else if(key.includes("4#水泵")){
                            if(key.includes("压力")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateZqP.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("温度")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateZqT.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("累积流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateZqLF.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("总管流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateZqF.push([list[key][i].dt, list[key][i].value])
                                }
                            }
                        }else if(key.includes("5#水泵")){
                            if(key.includes("压力")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateKqP.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("温度")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateKqT.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("累积流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateKqLF.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("总管流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateKqF.push([list[key][i].dt, list[key][i].value])
                                }
                            }
                        }else if(key.includes("6#水泵")){
                            if(key.includes("压力")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateMqP.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("温度")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateMqT.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("累积流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateMqLF.push([list[key][i].dt, list[key][i].value])
                                }
                            }else if(key.includes("总管流量")){
                                for (let i = 0; i < list[key].length; i++) {
                                    this.seriesDateMqF.push([list[key][i].dt, list[key][i].value])
                                }
                            }
                        }
                    })
                }
                series1.push({
                    name: "1#水泵压力",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateDqP
                })
                series1.push({
                    name: "2#水泵压力",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateDhP
                })
                series1.push({
                    name: "3#水泵压力",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateYqP
                })
                series1.push({
                    name: "4#水泵压力",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateZqP
                })
                series1.push({
                    name: "5#水泵压力",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateKqP
                })
                series1.push({
                    name: "6#水泵压力",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateMqP
                })
                series2.push({
                    name: "1#水泵温度",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateDqT
                })
                series2.push({
                    name: "2#水泵温度",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateDhT
                })
                series2.push({
                    name: "3#水泵温度",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateYqT
                })
                series2.push({
                    name: "4#水泵温度",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateZqT
                })
                series2.push({
                    name: "5#水泵温度",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateKqT
                })
                series2.push({
                    name: "6#水泵温度",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateMqT
                })
                series3.push({
                    name: "1#水泵流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateDqF
                })
                series3.push({
                    name: "2#水泵流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateDhF
                })
                series3.push({
                    name: "3#水泵流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateYqF
                })
                series3.push({
                    name: "4#水泵流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateZqF
                })
                series3.push({
                    name: "5#水泵流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateKqF
                })
                series3.push({
                    name: "6#水泵流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateMqF
                })
                series4.push({
                    name: "1#水泵累积流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateDqLF
                })
                series4.push({
                    name: "2#水泵累积流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateDhLF
                })
                series4.push({
                    name: "3#水泵累积流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateYqLF
                })
                series4.push({
                    name: "4#水泵累积流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateZqLF
                })
                series4.push({
                    name: "5#水泵累积流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateKqLF
                })
                series4.push({
                    name: "6#水泵累积流量",
                    type: 'line',
                    yAxisIndex: 0,
                    data: this.seriesDateMqLF
                })
                this.getChart1(series1)
                this.getChart2(series2)
                this.getChart3(series3)
                this.getChart4(series4)
            })
        },
        getChart1(series) {
            var chartDom1 = this.$refs['chart1'];
            var myChart1 = echarts.init(chartDom1);
            myChart1.clear()
            var option1;
            const colors = ['#5470C6', '#c25d5d', '#5c9293', '#ffaa8c'];

            option1 = {
                title: {
                text: '压力',
                left: 'center',
                },
                tooltip: {
                trigger: 'axis'
                },
                legend: {

                    top:'10%'
                },
                grid: {
                left: '3%',
                right: '3%',
                bottom: '8%',
                top: '20%',
                containLabel: true
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10,
                    bottom: '3%',
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10
                }
                ],
                xAxis: {
                type: 'category',
                boundaryGap: true,
                data: this.dtHourList
                },
                yAxis:
                {
                    type: 'value',
                    alignTicks: true,
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                    },
                    axisLabel: {
                    formatter: '{value}'
                    }
                },
                series: series,
                // {
                //     name: 'Mpa',
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateP
                // },
            };
            option1 && myChart1.setOption(option1);
            myChart1.resize();
        },
        getChart2(series) {
            var chartDom2 = this.$refs['chart2'];
            var myChart2 = echarts.init(chartDom2);
            myChart2.clear()
            var option2;
            const colors = ['#5470C6', '#c25d5d', '#5c9293', '#ffaa8c'];

            option2 = {
                title: {
                text: '温度',
                left: 'center',
                },
                tooltip: {
                trigger: 'axis'
                },
                legend: {

                    top:'10%'
                },
                grid: {
                left: '3%',
                right: '3%',
                bottom: '8%',
                top: '20%',
                containLabel: true
                },
                // toolbox: {
                //   feature: {
                //     saveAsImage: {}
                //   }
                // },
                dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10,
                    bottom: '3%',
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10
                }
                ],
                xAxis: {
                type: 'category',
                boundaryGap: true,
                data: this.dtHourList
                },
                yAxis:
                {
                    type: 'value',
                    alignTicks: true,
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[1]
                    }
                    },
                    axisLabel: {
                    formatter: '{value}'
                    }
                },
                series: series,
                // {
                //     name: '℃',
                //     type: 'line',
                //     data: this.seriesDateT
                // },
            };
            option2 && myChart2.setOption(option2);

            myChart2.resize();
        },
        getChart3(series) {
            var chartDom3 = this.$refs['chart3'];
            var myChart3 = echarts.init(chartDom3);
            myChart3.clear()
            var option3;
            const colors = ['#5470C6', '#c25d5d', '#5c9293', '#ffaa8c'];

            option3 = {
                title: {
                text: '流量',
                left: 'center',
                },
                tooltip: {
                trigger: 'axis'
                },
                legend: {

                    top:'10%'
                },
                grid: {
                left: '3%',
                right: '3%',
                bottom: '8%',
                top: '20%',
                containLabel: true
                },
                dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10,
                    bottom: '3%',
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10
                }
                ],
                xAxis: {
                type: 'category',
                boundaryGap: true,
                data: this.dtHourList
                },
                yAxis:
                {
                    type: 'value',
                    alignTicks: true,
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[2]
                    }
                    },
                    axisLabel: {
                    formatter: '{value}'
                    }
                },
                series: series,
                // {
                //     name: 'm³/h',
                //     type: 'line',
                //     data: this.seriesDateF
                // },
            };
            option3 && myChart3.setOption(option3);
            myChart3.resize();
        },
        getChart4(series) {
            var chartDom4 = this.$refs['chart4'];
            var myChart4 = echarts.init(chartDom4);
            myChart4.clear()
            var option4;
            const colors = ['#5470C6', '#c25d5d', '#5c9293', '#3e7742'];

            option4 = {
                title: {
                text: '累积流量',
                left: 'center',
                },
                tooltip: {
                trigger: 'axis'
                },
                legend: {

                    top:'10%'
                },
                grid: {
                left: '3%',
                right: '3%',
                bottom: '8%',
                top: '20%',
                containLabel: true
                },
                dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10,
                    bottom: '3%',
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 0,
                    end: 100,
                    height: 10
                }
                ],
                xAxis: {
                type: 'category',
                boundaryGap: true,
                data: this.dtHourList
                },
                yAxis:
                {
                    type: 'value',
                    alignTicks: true,
                    axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[3]
                    }
                    },
                    axisLabel: {
                    formatter: '{value}'
                    }
                },
                series: series,
                // {
                //     name: 'm³/h',
                //     type: 'line',
                //     yAxisIndex: 0,
                //     data: this.seriesDateLF
                // },
            };
            option4 && myChart4.setOption(option4);
            myChart4.resize();
        },
    }
  }
</script>

<style lang="scss"  scoped>
 .param-title{
   font-size: 16px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content: center;
 }

 ::v-deep .dividerStyle{
   background-color: #ffffff;
   margin: 6px 0!important;
 }
 .el-card ::v-deep .el-card__header {

   //padding: 15px 10px;
   background-color: #bfefff;// #b0e0e6;
   //color: #1c84c6;
   //height: 0px !important;
   font-weight: bold;
   font-size: 24px;
   //line-height: 1px;
 }

 .el-card ::v-deep .el-card__body {
   padding: 2px 1px;
   //background-color: palegoldenrod;
 }

 ::v-deep td{
   //padding: 0px 0;
   text-align: center;
   //font-size: 16px;
 }



 /* 表头内容如何居中 */
 ::v-deep .el-table th.el-table__cell>.cell {
   padding: 0 0;

 }

 /* 表格内容如何居中 */
 ::v-deep .el-table td.el-table__cell div {
   text-align: center;
   padding: 0 0;
 }
 ::v-deep.operate-table td {
   font-size: 14px;
   text-align: center;

   font-family: 宋体, Arial;
   border: 1px solid black;
   border-color: #CFCFCF;
   color: #000000;
   padding: 3px ;
   ::v-deep.alt {
     background: #F5FAFA;
     color: #797268;
   }

 }
 ::v-deep.operate-table tr {
   height: 30px;

 }

 ::v-deep.operate-table  tbody {
   margin:0  auto;
   width: 100%;
 }
</style>
